import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Input, Button, Space, Typography, message, Modal } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Solution } from './models/solutionModels';
import { getAllSolutions, searchSolutions, deleteSolution } from '../../services/solutionService';
import { history } from 'umi';
import styles from './index.less';

const { Title } = Typography;
const { Search } = Input;

const SolutionList: React.FC = () => {
  const [solutions, setSolutions] = useState<Solution[]>([]);
  const [loading, setLoading] = useState(false);

  // 获取解决方案列表
  const fetchSolutions = async (keyword?: string) => {
    try {
      setLoading(true);
      const response = keyword 
        ? await searchSolutions(keyword)
        : await getAllSolutions();
      
      if (response.code === 200) {
        setSolutions(response.data || []);
      } else {
        message.error('获取解决方案列表失败');
        setSolutions([]);
      }
    } catch (error) {
      console.error('获取解决方案列表失败:', error);
      message.error('获取解决方案列表失败');
      setSolutions([]);
    } finally {
      setLoading(false);
    }
  };

  // 初始化加载
  useEffect(() => {
    fetchSolutions();
  }, []);

  // 处理搜索
  const handleSearch = (value: string) => {
    fetchSolutions(value);
  };

  // 处理删除
  const handleDelete = async (id: number) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个解决方案吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        try {
          const response = await deleteSolution(id);
          if (response.code === 200) {
            message.success('删除成功');
            fetchSolutions();
          } else {
            message.error('删除失败');
          }
        } catch (error) {
          console.error('删除失败:', error);
          message.error('删除失败');
        }
      }
    });
  };

  // 处理编辑
  const handleEdit = (solution: Solution) => {
      console.log('编辑解决方案:', '/solutions/',`${solution.id}`,'/edit', solution);
      history.push(`/solutions/${solution.id}/edit`);
  };

  // 处理新建
  const handleCreate = () => {
      history.push('/solutions/new');
  };

  // 处理查看详情
  const handleViewDetail = (solution: Solution) => {
    history.push(`/solutions/${solution.id}/index`);
  };

  return (
    <PageContainer>
      <Card>
        <div className={styles.header}>
          <Search
            placeholder="搜索解决方案"
            allowClear
            enterButton={<SearchOutlined />}
            onSearch={handleSearch}
            style={{ width: 300 }}
          />
          <Button 
            type="primary" 
            icon={<PlusOutlined />}
            onClick={handleCreate}
          >
            新建解决方案
          </Button>
        </div>

        <div className={styles.cardContainer}>
          {solutions && solutions.length > 0 ? (
            solutions.map((solution) => (
              <Card
                key={solution.id}
                title={
                  <a onClick={() => handleViewDetail(solution)} className={styles.cardTitle}>
                    {solution.solutionName}
                  </a>
                }
                className={styles.solutionCard}
                // extra={
                //   <Space>
                //     <Button 
                //       type="text" 
                //       icon={<EditOutlined />}
                //       onClick={() => handleEdit(solution)}
                //     >
                //       编辑
                //     </Button>
                //     <Button 
                //       type="text" 
                //       danger 
                //       icon={<DeleteOutlined />}
                //       onClick={() => handleDelete(solution.id)}
                //     >
                //       删除
                //     </Button>
                //   </Space>
                // }
              >
                <div className={styles.description}>{solution.description}</div>
              </Card>
            ))
          ) : (
            <Card>
              <Typography.Text type="secondary">
                {loading ? '加载中...' : '暂无解决方案'}
              </Typography.Text>
            </Card>
          )}
        </div>
      </Card>
    </PageContainer>
  );
};

export default SolutionList; 